<!-- 售后模板 -->
<template>
	<div style="width: 100%; display: flex">
		<el-upload style="flex: 8" ref="uploadRef" class="upload-demo" multiple :show-file-list="false" :auto-upload="false" :file-list="props.list" action="" :on-change="handleChange">
			<el-button type="primary" :loading="state.loading">上传</el-button>
		</el-upload>
		<el-icon style="flex: 1" @click="handleSort"><Sort /></el-icon>
		<el-icon v-if="state.isBatchDelete" style="flex: 1" color="red" @click="BatchDelete"><Delete /></el-icon>
		<el-icon v-else style="flex: 1" @click="handeBatchDelete"><Delete /></el-icon>
		<el-icon v-if="state.isBatchDelete" style="flex: 1" @click="state.isBatchDelete = !state.isBatchDelete"><CircleClose /></el-icon>
	</div>
	<div class="upload-file-list">
		<draggable :list="state.fileList" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
			<template #item="{ element, index }">
				<div class="list-item">
					<div class="list-item-title" @click="handelDeleteed(element)">
						<label v-if="state.isBatchDelete" class="batchdel" :class="isSelected(element.name) ? 'isSelect' : 'noSelect'"></label>
						<el-image style="height: 30px; width: 40px; margin-right: 20px" v-if="element.fileType == 'image'" :src="getUrl(element)"></el-image>
						<span v-else-if="element.fileType == 'video'" style="height: 30px; width: 40px; background: #000; margin-right: 20px"></span>
						{{ element.name }}<span v-if="element.remarks">({{ element.remarks }})</span>
					</div>
					<div v-if="!state.isBatchDelete" class="icon-list">
						<a title="展示详情" class="list-item-icon" @click.stop="handleSearch(element, index)"
							><el-icon><Search /></el-icon
						></a>
						<a title="修改备注" class="list-item-icon" @click="handleUpdate(element, index)"
							><el-icon><Edit /></el-icon>
						</a>
						<a title="删除数据" class="list-item-icon" @click="handleDelete(element, index)"
							><el-icon> <Delete /> </el-icon
						></a>
					</div>
				</div>
			</template>
		</draggable>
	</div>
	<el-dialog draggable v-model="state.isShow" title="详情" width="500">
		<div>名称：{{ state.showfile.name }}</div>
		<div>备注：{{ state.showfile.remarks }}</div>
		<el-image v-if="state.showfile.fileType == 'image'" :src="getUrl(state.showfile)"></el-image>
		<video v-else-if="state.showfile.fileType == 'video'" controls :src="getUrl(state.showfile)"></video>
	</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { fileToBase64 } from '/@/utils/base64Conver';
import { ElMessageBox, ElMessage } from 'element-plus'; //elementUI提示
//父级传递来的参数
var props = defineProps({
	list: [] as any,
	fileBase64: [] as any,
	DelfileUrl: [] as any,
});
const state = reactive({
	drag: false,
	isShow: false,
	loading: false,
	showfile: {} as any,
	DelfileUrl: [] as any,
	fileList: [] as any,
	fileBase64: [] as any,
	imagefile: {} as any,
	sortState: false, //排序顺序判断
	isBatchDelete: false, //是否开启批量删除
	BatchDeleteList: [] as Array<any>, //批量删除列表
});
const handeBatchDelete = () => {
	state.isBatchDelete = true;
};
const handelDeleteed = (val: any) => {
	let selectedval = state.BatchDeleteList.findIndex((item: any) => {
		return val.name == item.name;
	});
	if (selectedval == -1) {
		state.BatchDeleteList.push(val);
	} else {
		state.BatchDeleteList.splice(selectedval, 1);
	}
};
const isSelected = (name: any) => {
	let selectedlist = state.BatchDeleteList.filter((val: any) => {
		return val.name == name;
	});
	if (selectedlist.length == 0) {
		return false;
	} else {
		return true;
	}
};
const handleSort = () => {
	if (state.fileList.length == 0) {
		ElMessage.error(`请先上传图片，再进行排序`);
		return;
	}
	let sortlist = [] as Array<any>;
	if (state.sortState) {
		sortlist = state.fileList.sort(function (a: any, b: any) {
			if (a.name < b.name) {
				return -1;
			}
			if (a.name > b.name) {
				return 1;
			}
			return 0;
		});
	} else {
		sortlist = state.fileList.sort(function (a: any, b: any) {
			if (a.name > b.name) {
				return -1;
			}
			if (a.name < b.name) {
				return 1;
			}
			return 0;
		});
	}
	state.sortState = !state.sortState;
	state.fileList = sortlist;
};
const BatchDelete = () => {
	if (state.BatchDeleteList.length == 0) {
		ElMessage.error(`请先选择删除的数据！`);
		return;
	}
	ElMessageBox.confirm('确定删除数据吗？', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).then(() => {
		state.BatchDeleteList.forEach((val: any) => {
			state.DelfileUrl.push(val.url);
			let selectedval = state.fileList.findIndex((item: any) => {
				return val.name == item.name;
			});
			state.fileList.splice(selectedval, 1);
		});
		state.BatchDeleteList = [];
	});
};
const handleDelete = (item: any, index: Number) => {
	ElMessageBox.confirm('删除仅为临时删除，永久删除请保存', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).then(() => {
		state.DelfileUrl.push(item.url);
		state.fileList.splice(index, 1);
	});
	// let fileindex = state.fileBase64.findIndex((val: any) => {
	// 	return (val.fileName = item.fileName);
	// });
	// if (fileindex) {
	// 	state.fileBase64.splice(fileindex, 1);
	// }
};
const handleUpdate = (item: any, index: Number) => {
	ElMessageBox.prompt('备注', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).then(({ value }) => {
		item.remarks = value;
		// let fileindex = state.fileBase64.findIndex((val: any) => {
		// 	return (val.fileName = item.name);
		// });
		// if (fileindex) {
		// 	state.fileBase64[fileindex].fileName = value;
		// }
		ElMessage.success(`修改备注成功`);
	});
};
const handleSearch = (item: any, index: Number) => {
	state.showfile = item;
	state.isShow = true;
};
const getUrl = (item: any) => {
	let querey = item;
	return querey.fileBase64 ? querey.fileBase64.strBase64 : window.baseUrl + querey.url;
};
const onStart = () => {
	state.drag = true;
};
const onEnd = () => {
	state.drag = false;
};
const handleChange = (file: any, fileList: any) => {
	state.loading = true;
	fileToBase64(fileList[fileList.length - 1].raw).then((x) => {
		state.imagefile = { strBase64: x, fileName: fileList[fileList.length - 1].raw.name, contentType: fileList[fileList.length - 1].raw.type };
		var filetype = '';
		if (fileList[fileList.length - 1].raw.type.includes('image')) {
			filetype = 'image';
		} else {
			filetype = 'video';
		}

		let querey = { name: fileList[fileList.length - 1].raw.name, url: '/repair/' + fileList[fileList.length - 1].raw.name, fileType: filetype, remark: '', fileBase64: state.imagefile };
		let listlength = state.fileList.filter((val: any) => {
			return !!val.fileBase64;
		});
		if (listlength.length > 4) {
			ElMessage.error('新增图片大于规定数量（5），请先保存再上传');
			return;
		} else {
			state.fileList.push(querey);
		}
	});
	state.loading = false;
};
onMounted(() => {
	state.fileList = props.list ? props.list : [];
	state.DelfileUrl = props.DelfileUrl;
	state.isBatchDelete = false;
	state.BatchDeleteList = [];
	// state.fileBase64 = props.fileBase64;
});
</script>
<style lang="scss">
.upload-file-list {
	width: 100%;
	max-height: 400px;
	overflow-y: auto;
}
.list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
}
.list-item-title {
	height: 40px;
	display: flex;
	align-items: center;
}

.list-item-icon {
	margin-left: 10px;
}
.batchdel {
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin-right: 10px;
}
.noSelect {
	border: 1px solid #dcdfe6;
}
.isSelect {
	border: 1px solid #025299;
	background-color: #025299;
	position: relative;
	cursor: pointer;
}
.isSelect::before {
	position: absolute;
	content: ' ';
	width: 5px;
	height: 11px;
	transform: rotate(45deg);
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	top: 1px;
	left: 6px;
}
</style>
